<template>
	<cl-select-table
		ref="SelectTable"
		v-model="value"
		:title="'选择商品信息'"
		:service="service.product.product"
		:columns="columns"
		:params="params"
		:multiple="multiple"
		:dict="{ text: 'name' }"
		pickerType="table"
	>
		<cl-table ref="Table">
			<template #column-count="{ scope }">{{ scope.row.count }}</template>
		</cl-table>
	</cl-select-table>
</template>

<script setup lang="ts">
defineOptions({
	name: 'product-product-select'
});

import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import { CrudProps } from '/#/crud';
import { reactive, ref, useModel } from 'vue';
import { useDict } from '/$/dict';
const { dict } = useDict();

const props = defineProps({
	...CrudProps,
	modelValue: null,
	multiple: true
});

const { service } = useCool();
const { t } = useI18n();

const value = useModel(props, 'modelValue');

// 选项
const options = reactive({
	status: [
		{ label: '在售', value: 0, type: 'danger' },
		{ label: '下架', value: 1, type: 'success' }
	]
});
const Table = ref();
const SelectTable = ref();
const selectedDataMap = ref(new Map());
const emit = defineEmits(['update:modelValue', 'selection-change']);
const params = ref({ status: 0 });
const columns = ref([
	{
		label: '名称',
		prop: 'name',
		minWidth: 180,
		formatter: row => {
			const brandDict = dict.get('Brand').value; // 添加 .value 获取实际值
			const seriesDict = dict.get('Series').value; // 添加 .value 获取实际值
			const brand = brandDict?.find(item => item.value === row.brandId)?.label || '';
			const series = seriesDict?.find(item => item.value === row.series)?.label || '';
			// 检查名称中是否已包含品牌和系列
			let result = row.name;
			if (brand && !row.name.includes(brand)) {
				result += ` ${brand}`;
			}
			if (series && !row.name.includes(series) && series != brand) {
				result += ` ${series}`;
			}
			if (row.modelNumber && !row.name.includes(row.modelNumber) && series != brand) {
				result += row.modelNumber;
			}
			// 查看是否有训练次数，有则拼接上
			if (row.trainCount && row.trainCount > 0) {
				result += `(购买${row.trainCount}次)`;
			}
			// 查看是否有赠送次数，有则拼接上
			if (row.giftCount && row.giftCount > 0) {
				result += `(赠送${row.giftCount}次)`;
			}
			return result.trim();
		}
	},
	{ label: t('备注'), prop: 'description', showOverflowTooltip: true },
	// { label: '名称', prop: 'name', minWidth: 180 },
	// { label: '品牌', prop: 'brandId', dict: dict.get('Brand'), minWidth: 80 },
	// { label: '系列', prop: 'series', dict: dict.get('Series'), minWidth: 80 },
	// { label: '型号', prop: 'modelNumber', minWidth: 100 },
	{ label: '单价', prop: 'price', minWidth: 140 },
	{ label: '数量', prop: 'count' },
	{
		label: '操作',
		type: 'op',
		buttons: [
			{
				label: '+',
				type: 'success',
				onClick({ scope }) {
					scope.row.count ? scope.row.count++ : (scope.row.count = 1);
					SelectTable.value?.$refs.Table.toggleRowSelection(scope.row, true);
					// 更新或添加数据到 Map
					selectedDataMap.value.set(scope.row.id, {
						id: scope.row.id,
						count: scope.row.count
					});

					// 将 Map 转换为数组并发送事件
					const selectedData = Array.from(selectedDataMap.value.values());
					emit('selection-change', selectedData);
				}
			},
			{
				label: '-',
				type: 'danger',
				onClick({ scope }) {
					scope.row.count ? scope.row.count-- : (scope.row.count = null);
					if (scope.row.count <= 0) {
						scope.row.count = null;
						SelectTable.value?.$refs.Table.toggleRowSelection(scope.row, false);
						SelectTable.value?.removeId(scope.row.id);
						// 从 Map 中移除数据
						selectedDataMap.value.delete(scope.row.id);
					} else {
						// 更新 Map 中的数量
						selectedDataMap.value.set(scope.row.id, {
							id: scope.row.id,
							count: scope.row.count
						});
					}
					const selectedData = Array.from(selectedDataMap.value.values());
					emit('selection-change', selectedData);
				}
			}
		]
	}
	// {
	// 	label: '商品分类',
	// 	prop: 'productCategory',
	// 	dict: dict.get('productCategory'),
	// 	minWidth: 150
	// },
	// { label: '库存分类', prop: 'stockCategory', dict: dict.get('stockCategory'), minWidth: 150 },
	// { label: '焦点', prop: 'focus', dict: dict.get('focus') },
	// { label: '规格', prop: 'specifications', minWidth: 140 },
	// { label: '折射率', prop: 'refraction', minWidth: 140 },

	// { label: '库存', prop: 'stock', minWidth: 140 }
]);
</script>
